import { FC } from 'react';
import { connect, Loading, ConnectProps } from 'umi';
import styles from './index.less';
import { ForgetPwdModelState } from './model';
import NavBar from '@/components/NavBar';
import { Form, Button, Input } from 'antd-mobile';
import ValidateCode from '@/components/VlidateCode';

interface PageProps extends ConnectProps {
  forgetPwd: ForgetPwdModelState;
  loading: boolean;
}

const IndexPage: FC<PageProps> = function ({ forgetPwd, dispatch }) {
  const { name } = forgetPwd;
  return (
    <div className={styles.forgetPwdPage}>
      <NavBar title="忘记密码" />
      <div className={styles.forgetPwdContainer}>
        <Form
          layout="vertical"
          footer={
            <Button block type="submit" color="primary" size="large">
              重置密码
            </Button>
          }
        >
          <Form.Item
            name="email"
            label="邮箱"
            rules={[{ required: true, message: '邮箱不能为空' }]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
          <ValidateCode time={60} getValidate={() => true} />
          <Form.Item
            name="password"
            label="新密码"
            rules={[{ required: true, message: '新密码不能为空' }]}
          >
            <Input type="password" placeholder="请输入新密码" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default connect(
  ({
    forgetPwd,
    loading,
  }: {
    forgetPwd: ForgetPwdModelState;
    loading: Loading;
  }) => ({
    forgetPwd,
    loading: loading.models.forgetPwd,
  }),
)(IndexPage);
